<script setup>
import {onMounted} from 'vue'
import {blueTheme, darkTheme, greenTheme, lightTheme} from "../../../public/js/theme";
import {theme_btn} from "../../../public/js/home"
onMounted(() => {
    theme_btn()
})
</script>

<template>
    <div class="flex-grow gap-[1.5rem]">
        <div class="w-full min-h-[300px]">
            <div class="flex flex-col gap[.75rem] font-size-[.875rem] line-height-[1.25rem]">
                <div class="padding-bottom-[.75rem] border-bottom-width-1px border-color-[--set-close-btn-color]">
                    <div class="flex justify-between item-center gap[.75rem]">
                        <div>主题</div>
                        <button class="theme-select-btn theme-btn bg-white flex gap-[1rem] px-[.75rem] font-size-[.875rem] line-height-[1.25rem] border-radius-[.375rem] justify-center item-center h-[2.25rem]">
                            <span>浅色</span>
                            <span>
                                                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                                        <polyline points="6 9 12 15 18 9"></polyline>
                                                    </svg>
                                                </span>
                        </button>
                    </div>
                    <div class="theme-div fixed left-[85%] top-[32%] w-[200px] h-[160px] bg-white">
                        <div class="h-full w-full flex flex-col">
                            <button class="theme-btn bg-white flex-1 text-align-left line-height-[1.25rem] font-size-[1.25rem]" style="background-color: #fff" @click="lightTheme">浅色</button>
                            <button class="theme-btn color-white flex-1 text-align-left line-height-[1.25rem] font-size-[1.25rem]" style="background-color: #434553" @click="darkTheme">深色</button>
                            <button class="theme-btn flex-1 text-align-left line-height-[1.25rem] font-size-[1.25rem]" style="background-color: #19c17c" @click="greenTheme">护眼绿</button>
                            <button class="theme-btn flex-1 text-align-left line-height-[1.25rem] font-size-[1.25rem]" style="background-color: #6cdbff" @click="blueTheme">天空蓝</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>